<!DOCTYPE html>
<html lang="zh">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <title>账号管理</title>
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <link rel="stylesheet" type="text/css" href="css/materialdesignicons.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <!--表格插件css-->
    <link rel="stylesheet" href="js/bootstrap-table/bootstrap-table.min.css">
    <link rel="stylesheet" type="text/css" href="css/style.min.css">
    <!-- 引入对话框样式-->
    <link rel="stylesheet" type="text/css" href="js/jquery-confirm/jquery-confirm.min.css">
</head>

<body>

    <div class="container-fluid">

        <div class="row">

            <div class="col-lg-12">
                <div class="card">
                    <header class="card-header">
                        <div class="card-title">表格插件</div>
                    </header>
                    <div class="card-body">
                        <div id="toolbar" class="toolbar-btn-action">
                            <button id="btn_add" type="button" class="btn btn-primary me-1" data-bs-toggle="modal"
                                data-bs-target="#addModa">
                                <span class="mdi mdi-plus" aria-hidden="true"></span>新增
                            </button>
                            <button id="btn_enable" type="button" class="btn btn-success me-1">
                                <span class="mdi mdi-check" aria-hidden="true"></span>启用
                            </button>
                            <button id="btn_disable" type="button" class="btn btn-warning me-1">
                                <span class="mdi mdi-block-helper" aria-hidden="true"></span>禁用
                            </button>
                        </div>
                        <table id="table"></table>

                    </div>
                </div>
            </div>

        </div>

    </div>
    <div class="modal fade" id="addModa" tabindex="-1" aria-labelledby="exampleModalLiveLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title" id="exampleModalLiveLabel">添加账号</h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="form-floating mb-3">
                        <input type="text" class="form-control" id="username" placeholder="用户名">
                        <label for="floatingInput">用户名</label>
                    </div>
                    <div class="form-floating">
                        <input type="text" class="form-control" id="password" placeholder="密码">
                        <label for="floatingPassword">密码</label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="upAccount()">提交</button>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/popper.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/main.min.js"></script>
    <!--表格插件js-->
    <script src="js/bootstrap-table/bootstrap-table.js"></script>
    <script src="js/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
    <!-- 引入对话框插件 -->
    <script type="text/javascript" src="js/jquery-confirm/jquery-confirm.min.js"></script>

    <script>
        const channel = new BroadcastChannel("subBroadcast");
        /**
         * 分页相关的配置
         **/
        const pagination = {
            // 分页方式：[client] 客户端分页，[server] 服务端分页
            sidePagination: "client",
            // 初始化加载第一页，默认第一页
            pageNumber: 1,
            // 每页的记录行数
            pageSize: 10,
            // 可供选择的每页的行数 - (亲测大于1000存在渲染问题)
            pageList: [5, 10, 25, 50, 100],
            // 在上百页的情况下体验较好 - 能够显示首尾页
            paginationLoop: true,
            // 展示首尾页的最小页数
            paginationPagesBySide: 2
        };

        /**
         * 按钮相关配置
         **/
        const button = {
            // 按钮的类
            buttonsClass: 'default',
            // 类名前缀
            buttonsPrefix: 'btn'
        }

        /**
         * 图标相关配置
         **/
        const icon = {
            // 图标前缀
            iconsPrefix: 'mdi',
            // 图标大小
            iconSize: 'mini',
            // 图标的设置
            icons: {
                paginationSwitchDown: 'mdi-door-closed',
                paginationSwitchUp: 'mdi-door-open',
                refresh: 'mdi-refresh',
                toggleOff: 'mdi-toggle-switch-off',
                toggleOn: 'mdi-toggle-switch',
                columns: 'mdi-table-column-remove',
                detailOpen: 'mdi-plus',
                detailClose: 'mdi-minus',
                fullscreen: 'mdi-monitor-screenshot',
                search: 'mdi-table-search',
                clearSearch: 'mdi-trash-can-outline'
            }
        };

        /**
         * 表格相关的配置
         **/
        const table = {
            classes: 'table table-bordered table-hover table-striped lyear-table',
            // 唯一ID字段
            uniqueId: 'id',
            // 每行的唯一标识字段
            idField: 'id',
            // 是否启用点击选中行
            clickToSelect: true,
            // 是否显示详细视图和列表视图的切换按钮(clickToSelect同时设置为true时点击会报错)
            // showToggle: true,
            // 请求得到的数据类型
            dataType: 'jsonp',
            // 请求方法
            method: 'get',
            // 工具按钮容器
            toolbar: '#toolbar',
            // 是否分页
            pagination: true,
            // 是否显示所有的列
            showColumns: true,
            // 是否显示刷新按钮
            showRefresh: true,
            // 显示图标
            showButtonIcons: true,
            // 显示文本
            showButtonText: false,
            // 显示全屏
            showFullscreen: true,
            // 开关控制分页
            showPaginationSwitch: true,
            // 总数字段
            totalField: 'total',
            // 当字段为 undefined 显示
            undefinedText: '-',
            // 排序方式
            sortOrder: "asc",
            // 开启搜索框
            search: true,
            // 回车搜索
            searchOnEnterKey: true,
            // 搜索框空格
            trimOnSearch: true,
            onRefresh: function () {
                channel.postMessage({ code: 1 });
            },
            ...icon,
            ...pagination,
            ...button
        };

        /**
         * 用于演示的列信息
         **/
        const columns = [{
            field: 'example',
            checkbox: true,
            // 列的宽度
            width: 5,
            // 宽度单位
            widthUnit: 'rem'
        }, {
            field: 'id',
            title: '编号',
            // 使用[align]，[halign]和[valign]选项来设置列和它们的标题的对齐方式。
            // h表示横向，v标识垂直
            align: 'center',
            // 是否作为排序列
            sortable: true,
            // 当列名称与实际名称不一致时可用
            sortName: 'sortId',
            switchable: false,
            // 列的宽度
            width: 8,
            // 宽度单位
            widthUnit: 'rem'
        }, {
            field: 'nickname',
            align: 'center',
            title: '昵称',
            titleTooltip: '账号昵称'
        }, {
            field: 'username',
            align: 'center',
            title: '用户名',
            titleTooltip: '账号用户名'
        }, {
            field: 'password',
            align: 'center',
            title: '密码',
            titleTooltip: '账号密码'
        }, {
            field: 'money',
            align: 'center',
            title: '金币',
            titleTooltip: '账号的Y币数量'
        }, {
            field: 'activeVal',
            align: 'center',
            title: '活跃度',
            titleTooltip: '账号的活跃度'
        }, {
            field: 'sing',
            align: 'center',
            title: '签到',
            titleTooltip: '上次签到时间'
        }, {
            field: 'portLevel',
            align: 'center',
            title: '等级1',
            titleTooltip: '账号农场等级'
        }, {
            field: 'animalLevel',
            align: 'center',
            title: '等级2',
            titleTooltip: '账号牧场等级'
        }, {
            field: 'portSpecimen',
            align: 'center',
            title: '图鉴1',
            titleTooltip: '账号农场图鉴数'
        }, {
            field: 'portSpecimen',
            align: 'center',
            title: '等级2',
            titleTooltip: '账号牧场图鉴数'
        }, {
            field: 'state',
            title: '状态',
            formatter: function (value, row, index) {
                var value = "";
                if (row.state == "false") {
                    value = '<span class="badge bg-danger">禁用</span>';
                } else {
                    value = '<span class="badge bg-success">正常</span>';
                }
                return value;
            }
        }, {
            field: 'operate',
            title: '操作',
            formatter: btnGroup,  // 自定义方法
            events: {
                'click .edit-btn': function (event, value, row, index) {
                    event.stopPropagation();
                    editUser(row);
                }
            }
        }];

        // 自定义操作按钮
        function btnGroup() {
            let html =
                '<a href="#!" class="btn btn-sm btn-default me-1 edit-btn" title="编辑" data-bs-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>';
            return html
        }

        // 操作方法 - 编辑
        function editUser(raw) {
            $.confirm({
                title: `修改${raw.nickname}的密码:`,
                content: '<div class="form-group p-1 mb-0">' +
                    '  <label class="control-label">密码:</label>' +
                    '  <input autofocus="" type="text" id="input-password" placeholder="请输入新的密码" class="form-control">' +
                    '</div>',
                buttons: {
                    sayMyName: {
                        text: '确认',
                        btnClass: 'btn-orange',
                        action: function () {
                            var input = this.$content.find('input#input-password');
                            var errorText = this.$content.find('.text-danger');
                            if (!$.trim(input.val())) {
                                $.alert({
                                    content: "密码 字段不能为空。",
                                    type: 'red'
                                });
                                return false;
                            }
                            //输入后
                            channel.postMessage({
                                code: 3,
                                data: {
                                    table: "account",
                                    ids: [raw.id],
                                    data: {
                                        password: $.trim(input.val()),
                                        ukey: "NULL"
                                    }
                                }
                            });
                        }
                    },
                    '不更改': function () { }
                }
            });
        }
        window.addEventListener("message", function (e) {
            const data = e.data;
            console.log(data)
            if (data.code == 1) {
                $('table').bootstrapTable("load", data.data)
            }
        })
        $("table").bootstrapTable("refresh", (() => {
            channel.postMessage({ code: 1 });
            return {}
        })())
        // 获取数据
        $('table').bootstrapTable({
            ...table,
            // 自定义的查询参数
            columns,
        });
        function upAccount() {
            const username = $('#username')
            const password = $('#password')
            if (username.val() && password.val()) {
                channel.postMessage({
                    code: 2,
                    data: {
                        username: username.val(),
                        password: password.val()
                    }
                })
                username.val('')
                password.val('')
            } else {
                alert('请输入账号密码')
            }
        }
        $("#btn_enable").on("click", function () { // 启用
            var rowSelected = $('#table').bootstrapTable('getSelections');
            let ids = new Array();
            rowSelected.forEach(element => {
                ids.push(element.id)
            });
            channel.postMessage({
                code: 3,
                data: {
                    table: "account",
                    ids: ids,
                    data: {
                        state: true
                    }
                }
            });
        })
        $("#btn_disable").on("click", function () { // 禁用
            var rowSelected = $('#table').bootstrapTable('getSelections');
            let ids = new Array();
            rowSelected.forEach(element => {
                ids.push(element.id)
            });
            channel.postMessage({
                code: 3,
                data: {
                    table: "account",
                    ids: ids,
                    data: {
                        state: false
                    }
                }
            });
        })
    </script>
</body>

</html>